<template>
  <div class="container">
    <div class="forms-container">
      <div class="signin-signup">
        <form @submit.prevent="onSubmitLogin" class="sign-in-form">
          <h2 class="title">登录</h2>
          <div v-if="!isMobile" class="input-field">
            <i class="fas fa-user"></i>
            <input type="text" v-model="form.username" placeholder="用户名" />
          </div>
          <div class="input-field" v-if="!isMobile">
            <i class="fas fa-lock"></i>
            <input type="password" v-model="form.password" placeholder="密码" />
          </div>
          <div class="input-field" v-if="isMobile">
            <i class="fas fa fa-mobile"></i>
            <input
              type="text"
              class="mobile"
              v-model="form.phone"
              placeholder="手机号"
            />
            <a class="getcode" @click="getPhoneCode($event)">获取验证码</a>
          </div>
          <div class="input-field" v-if="isMobile">
            <i class="fas fa fa-file"></i>
            <input
              type="text"
              v-model="setPhoneCode"
              placeholder="请输入验证码"
            />
          </div>
          <input type="submit" value="立即登录" class="btn solid" />
          <p class="social-text">通过其他方式</p>
          <div class="social-media">
            <a
              v-if="!isMobile"
              @click="isMobile = true"
              href="#"
              class="social-icon"
            >
              <i class="fa fa-mobile"></i>
            </a>
            <a
              v-if="isMobile"
              @click="isMobile = false"
              href="#"
              class="social-icon"
            >
              <i class="fa fa-user"></i>
            </a>
            <a href="#" class="social-icon">
              <i class="fab fa-weixin"></i>
            </a>
            <a href="#" class="social-icon">
              <i class="fab fa-weibo"></i>
            </a>
            <a href="#" class="social-icon">
              <i class="fab fa-qq"></i>
            </a>
          </div>
        </form>
        <form @submit.prevent="onSubmitReg" class="sign-up-form">
          <h2 class="title">注册</h2>
          <div class="input-field">
            <i class="fas fa-user"></i>
            <input type="text" v-model="form.username" part="用户名" />
          </div>
          <div class="input-field">
            <i class="fas fa-lock"></i>
            <input type="password" v-model="form.password" placeholder="密码" />
          </div>
          <div class="input-field">
            <i class="fas fa-mobile"></i>
            <input type="number" v-model="form.phone" placeholder="手机号" />
          </div>

          <input type="submit" class="btn" value="立即注册" />
          <p class="social-text">通过其他方式</p>
          <div class="social-media">
            <a href="#" class="social-icon">
              <i class="fab fa-qq"></i>
            </a>

            <a href="#" class="social-icon">
              <i class="../../assets/logo.png"></i>
              <img src="../../assets/logo.png" alt="">
            </a>
            <a href="#" class="social-icon">
              <i class="fab fa-weibo"></i>
            </a>
            <a href="#" class="social-icon">
              <i class="fa fa-mobile"></i>
            </a>
          </div>
        </form>
      </div>
    </div>
    <div class="panels-container">
      <div class="panel left-panel">
        <div class="content">
          <h3 :style="{ color: 'white' }">加入我们</h3>
          <p>加入我们,成为家政服务的一份子.</p>
          <button class="btn transparent" id="sign-up-btn">去注册</button>
          <div :style="{ margin: '10px 0' }">
            <button
              @click="dialogVisible = true"
              class="btn transparent"
              id="sign-find-btn"
            >
              忘记密码
            </button>
          </div>
        </div>
        <img src="" class="image" alt="" />
      </div>
      <div class="panel right-panel">
        <div class="content">
          <h3>已有账号？</h3>
          <p>立即登录已有账号，享受独家权益</p>
          <button class="btn transparent" id="sign-in-btn">去登录</button>
        </div>
        <img src="" class="image" alt="" />
      </div>
    </div>
    <!-- 滑块验证码组件 -->
    <Vcode
      :show="isShow"
      @success="success"
      @close="close"
      @fail="fail"
    ></Vcode>
    <!-- 找回密码弹出框 -->
    <el-dialog
      v-model="dialogVisible"
      title="找回密码"
      width="40%"
      @close="closeDialogVisible"
      :destroy-on-close="true"
    >
      <div class="editPwdBox">
        <div class="item">
          <label for="">手机号</label>
          <el-input
            v-model="editPwdForm.phone"
            class="w-50 m-2"
            :style="{ margin: '0 10px', width: '230px' }"
            placeholder="请输入手机号"
          />
          <el-button
            type="primary"
            :disabled="editPwdForm.phone ? false : true"
            @click="findPwdGetPhoneCode($event)"
            >获取验证码</el-button
          >
        </div>
        <div class="item">
          <label for="">验证码</label>
          <el-input
            v-model="setPhoneCode"
            class="w-50 m-2"
            :disabled="codeInputStatus"
            :style="{ margin: '0 10px', width: '230px' }"
            placeholder="请输入验证码"
          />
        </div>
        <div class="item">
          <label for="">新密码</label>
          <el-input
            type="password"
            show-password
            v-model="editPwdForm.password"
            :disabled="setPhoneCode ? false : true"
            class="w-50 m-2"
            :style="{ margin: '0 10px', width: '230px' }"
            placeholder="请输入新密码"
          />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            :disabled="editPwdForm.password ? false : true"
            @click="editPwd"
          >
            确认修改
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 回退 -->
    <div class="back" @click="router.push('/homeview')">
      <el-icon><ArrowLeft /></el-icon>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import { ElMessage, ElMessageBox } from "element-plus";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import Vcode from "vue3-puzzle-vcode";
const store = useStore();
const router = useRouter();
const form = ref({
  username: "",
  password: "",
  phone: "",
  code: "",
});
// 找回密码form表单
const editPwdForm = ref({
  phone: "",
  password: "",
  code: "",
});
// 滑块是否显示
const isShow = ref(false);
// 是否是注册
const isReg = ref(false);
// 是否是手机验证码登录
const isMobile = ref(false);
// 输入的验证码
let setPhoneCode = ref();
let timer = ref(60);
// 修改密码弹出框
const dialogVisible = ref(false);
// 控制未获取验证码时 验证码输入框不能使用
const codeInputStatus = ref(true);
onMounted(() => {
  init();
});
const init = () => {
  const sign_in_btn = document.querySelector("#sign-in-btn");
  const sign_up_btn = document.querySelector("#sign-up-btn");
  const container = document.querySelector(".container");
  sign_up_btn.addEventListener("click", () => {
    container.classList.add("sign-up-mode");
  });
  sign_in_btn.addEventListener("click", () => {
    container.classList.remove("sign-up-mode");
  });
};
// 登录
const onSubmitLogin = async () => {
  console.log(1111111);
  isReg.value = true;
  console.log(form.value);

  // 判断是否是手机验证登录
  if (isMobile.value) {
    if (!setPhoneCode.value) {
      return ElMessage({ type: "error", message: "验证码不能为空!" });
    }
    form.value.code = setPhoneCode.value;
    let { data } = await axios.post("/apireception/login", form.value);

    if (data.code == 200) {
      window.sessionStorage.setItem("token", data.token);
      router.push(store.getters.pathname.path || "/console/home");
      return ElMessage({ type: "success", message: "登录成功" });
    }
    ElMessage({ type: "error", message: "验证码错误" });
    return;
  }
  if (!form.value.username)
    return ElMessage({ type: "error", message: "用户名不能为空!" });
  if (!form.value.password)
    return ElMessage({ type: "error", message: "密码不能为空!" });
  isShow.value = true;
};
// 注册
const onSubmitReg = async () => {
  isReg.value = false;
  if (!form.value.username)
    return ElMessage({ type: "error", message: "用户名不能为空!" });
  if (!form.value.password)
    return ElMessage({ type: "error", message: "密码不能为空!" });
  if (!form.value.phone)
    return ElMessage({ type: "error", message: "手机号不能为空!" });
  let phone = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
  if (!phone.test(form.value.phone))
    return ElMessage({ type: "error", message: "手机号码格式不正确！" });
  isShow.value = true;
};

// 滑块成功回调
const success = async () => {
  isShow.value = false;
  // 判断是注册还是登录
  if (isReg.value) {
    const { data } = await axios.post("http://localhost:3000/cxj/loginfilter", {
      phone: form.value.username,
      password: form.value.password,
    });
    console.log(data,'55555555555555555555555555');
    if (data.code == 200) {
      console.log(data, "3333333333333");
      localStorage.setItem("user", JSON.stringify(data.user));
      localStorage.setItem("token", JSON.stringify(data.token));
      localStorage.setItem("siderlist", JSON.stringify(data.siderlistdata));
      router.push({path:'/layout/home'})
      ElMessage({ type: "success", message: data.msg });
      return;
    }
    ElMessage({ type: "error", message: data.msg });
  } else {
    let { data } = await axios.post("/api/reception/reg", form.value);
    if (data.code == 200) {
      ElMessage({ type: "success", message: data.msg });
      return;
    }
    ElMessage({ type: "error", message: data.msg });
  }
};
// 点击遮罩层关闭滑块
const close = () => {
  isShow.value = false;
};
// 登录时获取验证码按钮点击事件
const getPhoneCode = async (event) => {
  if (!form.value.phone) {
    return ElMessage({ type: "error", message: "手机号不能为空!" });
  }
  // 验证格式
  let isphone = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
  if (!isphone.test(form.value.phone)) {
    return ElMessage({ type: "error", message: "手机号格式不正确!" });
  }
  if (timer.value != 60) return;

  setMobileCode(event);
};
// 找回密码时获取验证码按钮点击事件
const findPwdGetPhoneCode = (event) => {
  if (timer.value != 60) return;
  if (!editPwdForm.value.phone)
    return ElMessage({ type: "error", message: "手机号不能为空！" });
  let phone = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
  if (!phone.test(editPwdForm.value.phone))
    return ElMessage({ type: "error", message: "手机号码格式不正确！" });

  setMobileCode(event);
};
// 发送验证码
const setMobileCode = async (event) => {
  // 判断是找回密码的发送还是登录时发送
  if (dialogVisible.value) {
    let { data } = await axios.post("/api/code/code", {
      phone: editPwdForm.value.phone,
    });
    if (data.code == 402) {
      return ElMessage({ type: "error", message: "发送失败" });
    }
    codeInputStatus.value = false;
  } else {
    let { data } = await axios.post("/api/code/code", {
      phone: form.value.phone,
    });
    if (data.code == 401) {
      return ElMessage({ type: "error", message: "该手机号未注册" });
    }
    if (data.code == 402) {
      return ElMessage({ type: "error", message: "发送失败" });
    }
  }

  ElMessage({ type: "success", message: "发送成功！" });
  let a = undefined;
  a = setInterval(() => {
    if (timer.value <= 0) {
      clearInterval(a);
      timer.value = 60;
      event.target.innerText = "获取验证码";
      setPhoneCode.value = "";
      codeInputStatus.value = true;
      return;
    }
    timer.value--;
    event.target.innerText = "还剩" + timer.value + "秒";
  }, 1000);
};

// 确认找回密码按钮回调
const editPwd = async () => {
  if (!setPhoneCode.value)
    return ElMessage({ type: "error", message: "验证码不能为空！" });
  if (!editPwdForm.value.password)
    return ElMessage({ type: "error", message: "新密码不能为空！" });
  let { data } = await axios.post("/api/reception/editpwd", {
    phone: editPwdForm.value.phone,
    password: editPwdForm.value.password,
    code: setPhoneCode.value,
  });
  if (data.code != 200) return ElMessage({ type: "error", message: data.msg });
  dialogVisible.value = false;
  ElMessage({ type: "success", message: "修改成功！" });
};
const closeDialogVisible = () => {
  editPwdForm.value = {};
  setPhoneCode.value = "";
  codeInputStatus.value = true;
};
</script>

<style lang='less' scoped>
.back {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: black;
  text-align: center;
}
.back:hover {
  cursor: pointer;
}
/* 弹出框 */
.dialog-footer {
  button {
    padding: 10px;
  }
}
.editPwdBox {
  .item {
    margin: 5px 0;
    button {
      padding: 10px;
    }
  }
}
/* 弹出框css到此为止 */
.getcode {
  width: 100px;
  height: 100%;
}
.getcode:hover {
  background-color: transparent;
  cursor: pointer;
}
* {
  padding: 0;
  margin: 0;
}

.fas {
  line-height: 3 !important;
}

.container {
  position: relative;
  width: 100%;
  background-color: #fff;
  min-height: 100vh;
  overflow: hidden;
}

.forms-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.signin-signup {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 75%;
  width: 50%;
  transition: 1s 0.7s ease-in-out;
  display: grid;
  grid-template-columns: 1fr;
  z-index: 5;
}

form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0rem 5rem;
  transition: all 0.2s 0.7s;
  overflow: hidden;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

form.sign-up-form {
  opacity: 0;
  z-index: 1;
}

form.sign-in-form {
  z-index: 2;
}

.title {
  font-size: 2.2rem;
  color: #444;
  margin-bottom: 10px;
}

.input-field {
  max-width: 380px;
  width: 100%;
  background-color: #f0f0f0;
  margin: 10px 0;
  height: 55px;
  border-radius: 55px;
  display: grid;
  grid-template-columns: 15% 55% 15%;
  padding: 0 0.4rem;
  position: relative;
}

.input-field {
  text-align: center;
  line-height: 55px;
  color: #acacac;
  transition: 0.5s;
  font-size: 1.1rem;
}

.input-field input {
  background: none;
  outline: none;
  border: none;
  line-height: 1;
  font-weight: 600;
  font-size: 1.1rem;
  color: #333;
}

.input-field input::placeholder {
  color: #aaa;
  font-weight: 500;
}

.social-text {
  padding: 0.7rem 0;
  font-size: 1rem;
}

.social-media {
  display: flex;
  justify-content: center;
}

.social-icon {
  height: 46px;
  width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.45rem;
  color: #333;
  border-radius: 50%;
  border: 1px solid #333;
  text-decoration: none;
  font-size: 1.1rem;
  transition: 0.3s;
}

.social-icon:hover {
  color: #4481eb;
  border-color: #4481eb;
  background-color: transparent;
}

.btn {
  width: 150px;
  background: rgb(137, 217, 97);
  border: none;
  outline: none;
  height: 49px;
  border-radius: 49px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  margin: 10px 0;
  cursor: pointer;
  transition: 0.5s;
}

.btn:hover {
  background-color: #4d84e2;
}

.panels-container {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.container:before {
  content: "";
  position: absolute;
  height: 2000px;
  width: 2000px;
  top: -10%;
  right: 40%;
  transform: translateY(-50%);
  background-image: linear-gradient(-45deg, rgb(137,217,97),rgb(137,217,97));
  transition: 1.8s ease-in-out;
  border-radius: 50%;
  z-index: 6;
}

.image {
  width: 100%;
  transition: transform 1.1s ease-in-out;
  transition-delay: 0.4s;
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-around;
  text-align: center;
  z-index: 6;
}

.left-panel {
  pointer-events: all;
  padding: 3rem 17% 2rem 12%;
}

.right-panel {
  pointer-events: none;
  padding: 3rem 17% 2rem 17%;
}

.panel .content {
  color: #fff;
  transition: transform 0.9s ease-in-out;
  transition-delay: 0.6s;
}

.panel h3 {
  font-weight: 600;
  line-height: 1;
  font-size: 1.5rem;
}

.panel p {
  font-size: 0.95rem;
  padding: 0.7rem 0;
}

.btn.transparent {
  margin: 0;
  background: none;
  border: 2px solid #fff;
  width: 130px;
  height: 41px;
  font-weight: 600;
  font-size: 0.8rem;
}

.right-panel .image,
.right-panel .content {
  transform: translateX(800px);
}

.container.sign-up-mode:before {
  transform: translate(100%, -50%);
  right: 52%;
}

.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
  transform: translateX(-800px);
}

.container.sign-up-mode .signin-signup {
  left: 25%;
}

.container.sign-up-mode form.sign-up-form {
  opacity: 1;
  z-index: 2;
}

.container.sign-up-mode form.sign-in-form {
  opacity: 0;
  z-index: 1;
}

.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
  transform: translateX(0%);
}

.container.sign-up-mode .left-panel {
  pointer-events: none;
}

.container.sign-up-mode .right-panel {
  pointer-events: all;
}

@media (max-width: 870px) {
  .container {
    min-height: 800px;
    height: 100vh;
  }

  .signin-signup {
    width: 100%;
    top: 95%;
    transform: translate(-50%, -100%);
    transition: 1s 0.8s ease-in-out;
  }

  .signin-signup,
  .container.sign-up-mode .signin-signup {
    left: 50%;
  }

  .panels-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 1fr;
  }

  .panel {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 2.5rem 0%;
    grid-column: 1 / 2;
  }

  .right-panel {
    grid-row: 3 / 4;
  }

  .left-panel {
    grid-row: 1 / 2;
  }

  .image {
    width: 200px;
    transition: transform 0.9s ease-in-out;
    transition-delay: 0.6s;
  }

  .panel .content {
    padding-right: 15%;
    transition: transform 0.9s ease-in-out;
    transition-delay: 0.8s;
  }

  .panel h3 {
    font-size: 1.2rem;
  }

  .panel p {
    font-size: 0.7rem;
    padding: 0.5rem 0;
  }

  .btn.transparent {
    width: 110px;
    height: 35px;
    font-size: 0.7rem;
  }

  .container:before {
    width: 1500px;
    height: 1500px;
    transform: translateX(-50%);
    left: 30%;
    bottom: 68%;
    right: initial;
    top: initial;
    transition: 2s ease-in-out;
  }

  .container.sign-up-mode:before {
    transform: translate(-50%, 100%);
    bottom: 32%;
    right: initial;
  }

  .container.sign-up-mode .left-panel .image,
  .container.sign-up-mode .left-panel .content {
    transform: translateY(-300px);
  }

  .container.sign-up-mode .right-panel .image,
  .container.sign-up-mode .right-panel .content {
    transform: translateY(0px);
  }

  .right-panel .image,
  .right-panel .content {
    transform: translateY(300px);
  }

  .container.sign-up-mode .signin-signup {
    top: 5%;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 570px) {
  form {
    padding: 0 1.5rem;
  }

  .image {
    display: none;
  }

  .panel .content {
    padding: 0.5rem 1rem;
  }

  .container {
    padding: 1.5rem;
  }

  .container:before {
    bottom: 72%;
    left: 50%;
  }

  .container.sign-up-mode:before {
    bottom: 28%;
    left: 50%;
  }
}
</style>
